<script setup lang="ts">
import { userCounterStore } from '@/stores/counter';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

let key = ref('黑马程序员');
// 获取当前页面对应的路由对象
const route = useRoute();
// onMounted(() => {
//   // console.log(route.query);
//   console.log(route.params);
//   key.value = route.query.key as string;
// });


const stores = userCounterStore()

</script>

<template>
  <div class="search">
    <div>{{ stores }}</div>
    <div>{{ stores.user }}</div>
    <div v-on:click="stores.sbUser">点击删除1</div>
    <p>搜索关键字: {{ $route.params.key }}</p>
    <p>搜索结果:</p>
    <ul>  
      <li>{{ route.query }}</li>
      <li>{{ route.params }}</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>